<template>
    <div>
       <h2>人数统计</h2>
       <div id="one"></div>
    </div>
    </template>
    <script setup lang="ts">
        import { onMounted } from "vue";
        import * as echarts from 'echarts'
        import link from '../api/link.js'

        type EchartsOption = echarts.EchartsOption

        var option:EchartsOption

        onMounted(() => {
          var chartDom = document.getElementById('one')  
          var myChart = echarts.init(chartDom)

          link('/chartDataOne').then(res => {
            // console.log(res);
            let ydata = res.data.map(val => val.title)
            let xdata = res.data.map(val => val.num)

            option = {
                dataset:{
                    source:[
                        ['score', 'amount', 'product'],
                        [89.3, 58212, '1'],
                        [57.1, 78254, '2'],
                        [74.4, 41032, '3'],
                        [50.1, 12755, '4'],
                        [89.7, 20145, '5'],
                        [68.1, 79146, '6'],
                        [19.6, 91852, '7'],
                        [10.6, 101852, '8'],
                        [32.7, 20112, '9']
                    ]
                },
                xAxis:{
                    type:'value',
                    axisLine:{
                        lineStyle:{
                            color:'#fff'
                        }
                    }
                },
                yAxis:{
                    type:'category',
                    data:ydata,
                    axisLine:{
                        lineStyle:{
                            color:'#fff'
                        }
                    }
                },
                grid:{
                    top:'3%',
                    left:'2%',
                    bottom:'3%',
                    right:'6%',
                    containLabel:true
                },
                series:[
                    {
                        type:'bar',
                        data:xdata,
                        encode:{
                            x:'amount',
                            y:'product'
                        }
                    }
                ]
            }
            option && myChart.setOption(option)
          })
        })
    </script>
    <style scoped>
     h2{
         /* 48像素 */
         height: 0.6rem;
         color: #fff;
         line-height: 0.6rem;
         text-align: center;
         font-size: 0.25rem;
    
     }
     #one{
         height: 4.0667rem;
     }
    </style>